@extends('public.base')
@section('body')
    <style>
        .layui-unselect dl {
            max-height: 160px;
        }

        html {
            background-color: #fff;
        }
    </style>
    <div class="layui-row">
        <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
            <!-- ==================================  隐藏区  ================================== -->
            <input type="hidden" name="id" value="">

            <div class="layui-card">
                <div class="layui-card-body">


                    <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本信息</li>
                            <li>基础资料</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">

                                <div class="layui-form-item">
                                    <label class="layui-form-label">微信号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wx_no" lay-verify="required" autocomplete="off"
                                               placeholder="请输入会员手机号"
                                               class="layui-input" value="">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">昵称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wxname" lay-verify="required" autocomplete="off"
                                               placeholder="请输入会员手机号"
                                               class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">名字</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="truename" lay-verify="required" autocomplete="off"
                                               placeholder="请输入会员手机号"
                                               class="layui-input" value="">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">所属微信</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wx_kefu" lay-verify="required" autocomplete="off"
                                               placeholder="所属微信"
                                               class="layui-input" value="">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">粉丝来源</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wx_kefu" lay-verify="required" autocomplete="off"
                                               placeholder="粉丝来源"
                                               class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">加粉时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wx_add_time"   id="wx_add_time" autocomplete="off"
                                               placeholder="加粉时间" lay-verType="tips" lay-verify="required"
                                               class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" checked="" name="status"
                                               lay-skin="switch" lay-text="好友|删除" value="1">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">（关闭后，公告将不显示）</div>
                                </div>

                            </div>


                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">下单时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="start_time" name="add_time"
                                               lay-verType="tips"
                                               autocomplete="off"
                                               format="date" value="" placeholder="开始时间">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-inline" style="width: 260px;">
                                        <label class="layui-form-label">省份</label>
                                        <div class="layui-input-block">
                                            <select  name="receiver_province" class="province_select"  lay-filter="country">
                                                <option value="">请选择省</option>
                                                @foreach($areaList  as $k=>$v)
                                                    <option value="{{$v['area_id']}}">{{$v['title']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-input-inline" style="width: 260px;">
                                        <label class="layui-form-label">市</label>
                                        <div class="layui-input-block" >
                                            <select  name="receiver_city" id="city_id" lay-filter="city">
                                                <option value="">选择市</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-input-inline" style="width: 260px;">
                                        <label class="layui-form-label">区</label>
                                        <div class="layui-input-block">
                                            <select  name="receiver_area" class="region_id" id="region_id">
                                                <option value="">选择县/区</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="receiver_addr" lay-verify="required" autocomplete="off"
                                               placeholder="请输入标题"
                                               class="layui-input" value="">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    </div>

                    <!-- 按钮区 -->
                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">

                            <div class="layui-footer" style="left: 0;">
                                <button id="form_save" lay-filter="form_save" class="layui-btn"
                                        lay-submit="">
                                    保存
                                </button>
                                <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
    <script src="{{ADMIN_PATH}}js/admin.common.js"></script>
    <link rel="stylesheet" href="{{ADMIN_PATH}}kindeditor/themes/default/default.css" media="all">
    <script src="{{ADMIN_PATH}}kindeditor/kindeditor.js?{{time()}}"></script>
    <script>

        //========================================== 说明区 ==========================================
        //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

        // ==========================  公共变量区  ========================================
        var form_id = 'main_form';
        var save_url = '{{url('admin/ordersys/customer/add')}}';
        var up_url = '{{url('public/upload/pic')}}';
        // ==============================  业务处理  ==============================================
        layui.use(['element', 'form','laydate'], function () {
            //========================================== layui引用区 ==========================================
            var $ = layui.$
                , form = layui.form
            ;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            //开始日期
            var insStart = laydate.render({
                elem: '#wx_add_time'
                ,format: 'yyyy年MM月dd日'
            });
            //========================================== 页面初始化 ==========================================
            //1、初始化form值:1、后台传来的数据
            //var data = JSON.stringify(<?php echo isset($data) ? json_encode($data) : '';?>);
            //json_to_form(data, form_id);

            //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
            //var editor = create_editor('memo');


            //========================================== 数据提交、元素事件绑定区 ==========================================

            //1、表单提交，form_save 指的是:保存按钮上方的 lay-filter
            form.on('submit(form_save)', function (obj) {
                //1、提交修改：1、第一个参数是提交的网址url d 2、第二个参数是提交的数据，强制为json交互
                post_data(save_url, form_data_to_json(form_id), 1
                    //返回成功后执行
                    , function () {
                        try {
                            //重新刷新父窗口的数据区
                            parent.reload_data();
                        } catch (e) {
                            console.log(e);
                        }

                    }
                    //返回失败后执行
                    , function () {

                    });

                //2、
                //99、阻止浏览器跳转，请放在函数内部最后一行
                return false;
            });


            //2、表单重置
            $('#form_reset').click(function () {
                /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
                layer.confirm('确定重载表单吗？', function (index) {
                    //1、选择确定后执行的操作
                    window.location.reload();

                    //2、

                    //99、关闭自身窗口，请放在函数内部最后一行
                    layer.close(index);

                });
            });

            form.on('select(country)', function(data){
                var pid = data.value;
                $("#city_id").html('<option value="">请选择</option>');
                $("#region_id").html('<option value="">请选择</option>');

                var s = '<option value="">请选择</option>';
                $.ajax({
                    type: 'POST',
                    url: '{{url('/public/area/list')}}',
                    data: {pid: pid},
                    async: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 200) {
                            $.each(data.data, function (i, n) {

                                var option1 = $("<option>").val(n.area_id).text(n.title);
                                $("#city_id").append(option1);
                                form.render('select');
                                //s += '<option value="' + n.area_id + '">' + n.title + '</option>';
                            });
                            // $("#city_id").html(s);
                        } else {
                            $("#city_id").html('<option value="">请选择</option>');
                            $("#region_id").html('<option value="">请选择</option>');
                        }

                    }
                });

            });


            form.on('select(city)', function(data){
                var pid = data.value;
                // $("#city_id").html('<option value="">请选择</option>');
                $("#region_id").html('<option value="">请选择</option>');

                var s = '<option value="">请选择</option>';
                $.ajax({
                    type: 'POST',
                    url: '{{url('/public/area/list')}}',
                    data: {pid: pid},
                    async: false,
                    dataType: 'json',
                    success: function (data) {
                        console.log(1111);
                        if (data.status == 200) {
                            console.log(1111);
                            $.each(data.data, function (i, n) {
                                console.log(n.area_id+'----'+n.title);
                                var option1 = $("<option>").val(n.area_id).text(n.title);
                                $("#region_id").append(option1);
                                form.render('select');
                                //s += '<option value="' + n.area_id + '">' + n.title + '</option>';
                            });
                            console.log(3333);
                            // $("#city_id").html(s);
                        } else {
                            //  $("#city_id").html('<option value="">请选择</option>');
                            $("#region_id").html('<option value="">请选择</option>');
                        }

                    }
                });

            });

            //========================================== 渲染区 ==========================================
            //表单重新渲染，请保存到最后一行
            //渲染表单
            form.render();
        });


        layui.use('upload', function () {
            var $ = layui.$
                , form = layui.form
            ;
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_wap_img' //绑定元素
                , url: up_url //上传接口
                , field: 'file'
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(1); //上传loading
                }
                , done: function (res) {
                    if (res.status == 200) {
                        var src = res.data.src;
                        $("#upload_wap_img_val").val(src);
                    } else {
                        layer.msg(res.msg);
                    }
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                }
                , error: function () {
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });


            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_wapcontent_img' //绑定元素
                , url: up_url //上传接口
                , field: 'imgFile'
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(1); //上传loading
                }
                , done: function (res) {
                    if (res.error == 0) {
                        $("#upload_img_wap_content").val(res.url);
                    } else {
                        layer.msg(res.msg);
                    }
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                }
                , error: function () {
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

        });

    </script>
@stop